// import react, { useState } from '../../packages/react/index.ts';
// @ts-nocheck
import {
	useState,
	useEffect,
	useTransition,
	useRef,
	useContext,
	createContext
} from '../../packages/react/index.ts';
import ReactDOM from '../../packages/react-dom/index.ts';
import { ReactElementType } from '../../packages/shared/ReactTypes.ts';

import TabButton from './TabButton.tsx';
import AboutTab from './AboutTab';
import PostsTab from './PostsTab.tsx';
import ContactTab from './ContactTab';
import './style.css';

// import { jsx as _jsx, jsxDEV } from '../../packages/react/src/jsx.ts';

// 用  react 官方的 jsx 方法
// console.log(react, 'log1');

// const jsx = (
// 	<div>
// 		<h1>big</h1>
// 	</div>
// );

// // 自己调试 先在这 打个断点
// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	jsx as ReactElementType
// );

// const App = () => {
// 	return (
// 		<div>
// 			<h1>
// 				<Child />
// 			</h1>
// 		</div>
// 	);
// };

// function Child() {
// 	const [a, setA] = useState(1);
// 	console.log(a, 'loga');
// 	// @ts-ignore
// 	window.setA = setA;
// 	return a === 1 ? <h1>{a}</h1> : <h1>2</h1>;
// }

// // 自己调试 先在这 打个断点
// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

// const App = () => {
// 	const [a, setA] = useState(1);
// 	console.log(a, 'loga');
// 	// @ts-ignore
// 	window.setA = setA;
// 	return a === 1 ? (
// 		<h1 onClick={() => {}} className="a">
// 			{a}
// 		</h1>
// 	) : (
// 		<h1>2</h1>
// 	);
// };

// // 自己调试 先在这 打个断点
// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

// const App = () => {
// 	const [a, setA] = useState(1);
// 	console.log(a, 'loga');

// 	return (
// 		<h1
// 			onClick={() => {
// 				setA(Math.random());
// 			}}
// 			className="a"
// 		>
// 			{a}
// 		</h1>
// 	);
// };

// // 自己调试 先在这 打个断点
// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

// 测试多节点 diff

// const App = () => {
// 	const [a, setA] = useState(1);
// 	console.log(a, 'loga');
// 	let arr =
// 		a % 2 === 0
// 			? [
// 					<li key="1">1</li>,
// 					<li key="2">2</li>,
// 					<li key="3">3</li>,
// 					<li key="9">9</li>
// 			  ]
// 			: [<li key="3">3</li>, <li key="2">2</li>, <li key="1">1</li>];
// 	return (
// 		<ul
// 			onClickCapture={() => {
// 				setA(a + 1);
// 			}}
// 		>
// 			{arr}
// 		</ul>
// 	);
// };

// // 自己调试 先在这 打个断点
// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

// 调试 fragment
// const App = () => {
// 	const [a, setA] = useState(1);
// 	console.log(a, 'loga');
// 	let arr =
// 		a % 2 === 0
// 			? [
// 					<li key="1">1</li>,
// 					<li key="2">2</li>,
// 					<li key="3">3</li>,
// 					<li key="9">9</li>
// 			  ]
// 			: [<li key="3">3</li>, <li key="2">2</li>, <li key="1">1</li>];

// 测试1
// return (
// 	<>
// 		<li>4</li>
// 		<li>5</li>
// 	</>
// );
// 测试2
// return (
// 	<ul
// 		onClickCapture={() => {
// 			setA(a + 1);
// 		}}
// 	>
// 		<>
// 			<li>4</li>
// 			<li>5</li>
// 		</>
// 		<li>6</li>
// 		<li>7</li>
// 	</ul>
// );
// // / 测试3
// return (
// 	<ul
// 		onClickCapture={() => {
// 			setA(a + 1);
// 		}}
// 	>
// 		<li>4</li>
// 		<li>5</li>
// 		{arr}
// 	</ul>
// );

// / 测试4
// return (
// 	<ul
// 		onClickCapture={() => {
// 			setA(a + 1);
// 		}}
// 	>
// 		{a === 1 ? (
// 			<>
// 				<h1>2</h1>
// 				<Child />
// 				<h1>1</h1>
// 			</>
// 		) : (
// 			2
// 		)}
// 	</ul>
// );
// };

// function Child() {
// 	return <h1>Child</h1>;
// }

// // 自己调试 先在这 打个断点
// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

// 测试  同步 微任务 调度更新流程
// const App = () => {
// 	const [a, setA] = useState(1);
// 	return (
// 		<ul
// 			onClickCapture={() => {
// 				setA((a) => a + 1);
// 				setA((a) => a + 1);
// 				setA((a) => a + 1);
// 			}}
// 		>
// 			{a}
// 		</ul>
// 	);
// };

// // 自己调试 先在这 打个断点
// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

// 测试 useEffect
// function App() {
// 	const [num, updateNum] = useState(0);
// 	// 这里如果打断点执行 就是
// 	// 微任务执行1 微任务执行2 宏任务执行 useEffect回调执行 这是理性情况
// 	// 不打断点就是 useEffect回调执行微任务执行1 微任务执行2 宏任务执行
// 	// 就很奇怪
// 	Promise.resolve().then(() => {
// 		console.log('微任务执行1', 'log');
// 	});
// 	setTimeout(() => {
// 		console.log('宏任务执行', 'log');
// 	}, 0);
// 	// @ts-ignore
// 	useEffect(() => {
// 		// console.log('App mount');
// 		console.log('useEffect回调执行', 'log');
// 	}, []);
// 	Promise.resolve().then(() => {
// 		console.log('微任务执行2', 'log');
// 	});

// 	// useEffect(() => {
// 	// 	console.log('num change create', num);
// 	// 	return () => {
// 	// 		console.log('num change destroy', num);
// 	// 	};
// 	// }, [num]);
// 	return 1;
// 	// <div onClick={() => updateNum(num + 1)}>
// 	// 	{num === 0 ? <Child /> : 'noop'}
// 	// </div>
// }

// function Child() {
// 	useEffect(() => {
// 		console.log('Child mount');
// 		return () => console.log('Child unmount');
// 	}, []);

// 	return 'i am child';
// }

// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

//  并发 更新例子 !!!!! 这个重要
// import {
// 	unstable_ImmediatePriority as ImmediatePriority,
// 	unstable_UserBlockingPriority as UserBlockingPriority,
// 	unstable_NormalPriority as NormalPriority,
// 	unstable_LowPriority as LowPriority,
// 	unstable_IdlePriority as IdlePriority,
// 	unstable_scheduleCallback as scheduleCallback,
// 	unstable_shouldYield as shouldYield,
// 	CallbackNode,
// 	unstable_getFirstCallbackNode as getFirstCallbackNode,
// 	unstable_cancelCallback as cancelCallback
// } from 'scheduler';

// import './style.css';
// const button = document.querySelector('button');
// const root = document.querySelector('#root');

// type Priority =
// 	| typeof IdlePriority
// 	| typeof LowPriority
// 	| typeof NormalPriority
// 	| typeof UserBlockingPriority
// 	| typeof ImmediatePriority;

// interface Work {
// 	count: number;
// 	priority: Priority;
// }

// const workList: Work[] = [];
// let prevPriority: Priority = IdlePriority;
// let curCallback: CallbackNode | null = null;

// [LowPriority, NormalPriority, UserBlockingPriority, ImmediatePriority].forEach(
// 	(priority) => {
// 		const btn = document.createElement('button');
// 		root?.appendChild(btn);
// 		btn.innerText = [
// 			'',
// 			'ImmediatePriority',
// 			'UserBlockingPriority',
// 			'NormalPriority',
// 			'LowPriority'
// 		][priority];
// 		btn.onclick = () => {
// 			console.log('点击了', 'log');
// 			workList.unshift({
// 				count: 100, //count 代表着 就是  一个任务里面 有多少个组件需要处理
// 				priority: priority as Priority
// 			});
// 			schedule();
// 		};
// 	}
// );

// function schedule() {
// 	const cbNode = getFirstCallbackNode();
// 	// 排序 优先级高的在前面
// 	const curWork = workList.sort((w1, w2) => w1.priority - w2.priority)[0];

// 	// 策略逻辑
// 	if (!curWork) {
// 		curCallback = null;
// 		cbNode && cancelCallback(cbNode);
// 		return;
// 	}

// 	const { priority: curPriority } = curWork;
// 	if (curPriority === prevPriority) {
// 		// 如果是 如果当前任务的优先级和 正在执行work的优先级是一样的 就不执行了
// 		// 可以理解为 一个任务正在执行 用户点击插入了一个相同优先级任务
// 		return;
// 	}
// 	// 更高优先级的work
// 	cbNode && cancelCallback(cbNode);
// 	setTimeout(() => {
// 		console.log('宏任务执行了1', 'log');
// 	});
// 	Promise.resolve().then(() => {
// 		console.log('微任务执行了1', 'log');
// 	});
// 	// 调度返回一个 回调汗水
// 	curCallback = scheduleCallback(curPriority, perform.bind(null, curWork));
// 	setTimeout(() => {
// 		console.log('宏任务执行了2', 'log');
// 	});
// 	Promise.resolve().then(() => {
// 		console.log('微任务执行了2', 'log');
// 	});
// }

// function perform(work: Work, didTimeout?: boolean): any {
// 	// 什么情况下中断 什么情况不中断 根据下面三个条件来判断
// 	/**
// 	 * 1. work.priority 如果任务本身优先级 就是一个 同步的 那么就不能中断
// 	 * 2. 饥饿问题 如果一个任务 一直得不到执行 优先级竞争不过别的任务 给任务设置过期时间 如果过期了 他的优先级就变成 同步任务  同步任务优先级是最高的
// 	 * 3. 时间切片  shouldYield 表示 需要切片了 就是没时间 了
// 	 */
// 	const needSync = work.priority === ImmediatePriority || didTimeout;
// 	while ((needSync || !shouldYield()) && work.count) {
// 		// 继续执行的 条件 任务没执行完 且 (是一个同步任务 或者 时间切片没到)
// 		// 如果 没时间了 但任务是 同步的 那么也需要继续执行
// 		work.count--;
// 		console.log('同步任务 执行了', 'log');
// 		insertSpan(work.priority + '');
// 	}

// 	// 中断执行 或者 执行完  了 就记录下  任务的优先级
// 	prevPriority = work.priority;

// 	if (!work.count) {
// 		// 任务执行完了
// 		const workIndex = workList.indexOf(work);
// 		workList.splice(workIndex, 1); // 从列表中删除任务
// 		// 如果是 执行完了 就重置优先级
// 		prevPriority = IdlePriority;
// 	}

// 	const prevCallback = curCallback;
// 	schedule();
// 	const newCallback = curCallback;

// 	if (newCallback && prevCallback === newCallback) {
// 		// 工作过程仅有一个work
// 		// 如果仅有一个work，Scheduler有个优化路径：如果调度的回调函数的返回值是函数，则会继续调度返回的函数。
// 		return perform.bind(null, work);
// 	}
// }

// function insertSpan(content: any) {
// 	const span = document.createElement('span');
// 	span.innerText = content;
// 	span.className = `pri-${content}`;
// 	doSomeBuzyWork(10000000);
// 	root?.appendChild(span);
// }

// function doSomeBuzyWork(len: number) {
// 	// 人为降低速度
// 	let result = 0;
// 	while (len--) {
// 		result += len;
// 	}
// }

// 18课 测试 中断更新

// setTimeout(() => {
// 	console.log('宏任务', 'log');
// }, 0);
// function App() {
// 	const [num, update] = useState(100);
// 	return (
// 		<ul
// 			onClick={() => {
// 				// 分析内存占用情况
// 				let arr = new Array(1000000);
// 				update(50);
// 				console.log(arr, 'log');
// 			}}
// 		>
// 			{new Array(num).fill(0).map((_, i) => {
// 				return <Child key={i}>{i}</Child>;
// 			})}
// 		</ul>
// 	);
// }

// function Child({ children }: any) {
// 	// 故意让 child的渲染 慢20ms
// 	const now = performance.now();
// 	while (performance.now() - now < 20) {}
// 	return <li>{children}</li>;
// }

// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );
// Promise.resolve().then(() => {
// 	console.log('微任务', 'log');
// });

// 测试 useTransition

// function App() {
// 	const [isPending, startTransition] = useTransition();
// 	const [tab, setTab] = useState('about');
// 	function selectTab(nextTab: string) {
// 		debugger;
// 		startTransition(() => {
// 			setTab(nextTab);
// 		});
// 	}

// 	return (
// 		<>
// 			<TabButton isActive={tab === 'about'} onClick={() => selectTab('about')}>
// 				首页
// 			</TabButton>
// 			<TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}>
// 				博客 (render慢)
// 			</TabButton>
// 			<TabButton
// 				isActive={tab === 'contact'}
// 				onClick={() => selectTab('contact')}
// 			>
// 				联系我
// 			</TabButton>
// 			<hr />
// 			{tab === 'about' && <AboutTab />}
// 			{tab === 'posts' && <PostsTab />}
// 			{tab === 'contact' && <ContactTab />}
// 		</>
// 	);
// }

// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

// 测试 useRef
// function App() {
// 	const [isDel, del] = useState(false);
// 	const divRef = useRef(null);

// 	console.log('render divRef', divRef.current);

// 	useEffect(() => {
// 		console.log('useEffect divRef', divRef.current);
// 	}, []);

// 	return (
// 		<div ref={divRef} onClick={() => del(true)}>
// 			{isDel ? null : <Child />}
// 		</div>
// 	);
// }

// function Child() {
// 	return <p ref={(dom) => console.log('dom is:', dom)}>Child</p>;
// }
// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

// 测试 context

// const ctxA = createContext('deafult A');
// const ctxB = createContext('default B');

// function App() {
// 	return (
// 		<ctxA.Provider value={'A0'}>
// 			<ctxB.Provider value={'B0'}>
// 				<ctxA.Provider value={'A1'}>
// 					<Cpn />
// 				</ctxA.Provider>
// 			</ctxB.Provider>
// 			<Cpn />
// 		</ctxA.Provider>
// 	);
// }

// function Cpn() {
// 	const a = useContext(ctxA);
// 	const b = useContext(ctxB);
// 	return (
// 		<div>
// 			A: {a} B: {b}
// 		</div>
// 	);
// }
// debugger;
// ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
// 	(<App />) as ReactElementType
// );

// 22.6课测试  suspense use
function App() {
	return (
		<Suspense fallback={<div>loading...</div>}>
			<Cpn id={0} timeout={1000} />
		</Suspense>
		// 测试 use 不包含在 Suspense的情况 该组件的地方会白屏 然后 等数据回来后出现组件
		// <Cpn id={0} timeout={1000} />
	);
}

debugger;
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
	(<App />) as ReactElementType
);

// 嵌套Suspense
// function App() {
// 	return (
// 		<Suspense fallback={<div>外层...</div>}>
// 			<Cpn id={0} timeout={1000} />
// 			<Suspense fallback={<div>内层...</div>}>
// 				<Cpn id={1} timeout={3000} />
// 			</Suspense>
// 		</Suspense>
// 	);
// }

// 缓存快速失效
// function App() {
// 	const [num, setNum] = useState(0);
// 	return (
// 		<div>
// 			<button onClick={() => setNum(num + 1)}>change id: {num}</button>
// 			<Suspense fallback={<div>loading...</div>}>
// 				<Cpn id={num} timeout={2000} />
// 			</Suspense>
// 		</div>
// 	);
// }
